import { PageContainer, ProTable } from "@ant-design/pro-components";
import {
  Button,
  Modal,
  Input,
  Form,
  Checkbox,
  Radio,
  Space,
  InputNumber,
} from "antd";
import { connect } from "umi";
import { namespace, calcColumns } from "./configFile";
import { useEffect, useState, useRef } from "react";
// import AddModal from "./AddModal";
import SetWagesModal from "./SetWagesModal";
import SetTypeModal from "./SetTypeModal";

const Page = (props) => {
  const { dispatch, submitLoading, typeData, venueArr } = props;
  const [form] = Form.useForm();
  const typeRef = useRef(null);
  const wagesRef = useRef(null);
  const actionRef = useRef(null);
  const [row, setRow] = useState(null);

  useEffect(() => {
    dispatch({
      type: `${namespace}/pageInit`,
    });
  }, []);

  const handleExport = async () => {
    dispatch({
      type: `${namespace}/export`,
      params: {
        responseType: "blob",
      },
      callback: (res) => {
        //指定的file对象或Blob对象
        let url = window.URL.createObjectURL(res.data);
        let a = document.createElement("a");
        document.body.appendChild(a);
        let fileName = "员工工资.xlsx";
        a.href = url;
        a.download = fileName;
        a.click();
        window.URL.revokeObjectURL(url);
      },
    });
  };

  const editInfo = (record) => {
    dispatch({
      type: `${namespace}/querySalaryTypeList`,
      params: {
        current: 1,
        pageSize: 100,
        status: "0",
      },
      callback: (res) => {
        let salaryTypeJson = JSON.parse(
            record.salaryTypeJson ? record.salaryTypeJson : "[]"
          ),
          newRecord = { ...record };
        res.forEach((r) => {
          let index = salaryTypeJson.findIndex(
            (s) => s.salary_type_name == r.salaryTypeName
          );
          newRecord[r.salaryTypeName] =
            index >= 0 ? salaryTypeJson[index].values : 0;
        });
        console.log("newRecord", res, newRecord);
        wagesRef.current.setSalaryTypeData(res);
        wagesRef.current.form.setFieldsValue(newRecord);
        wagesRef.current.setOpen(true);
      },
    });
  };

  const toggleState = () => {
    dispatch({
      type: `${namespace}/toggleState`,
      params,
      callback: (res) => {
        form.setFieldsValue({ ...res });
      },
    });
  };

  const operate = {
    title: "操作",
    fixed: "right",
    dataIndex: "operator",
    align: "center",
    hideInSearch: true,
    render: (_, record) => {
      return (
        <Space>
          <Button type="link" onClick={() => editInfo(record)}>
            编辑
          </Button>
        </Space>
      );
    },
  };

  return (
    <PageContainer>
      <ProTable
        scroll={{ x: 1500 }}
        actionRef={actionRef}
        toolBarRender={() => [
          <Button
            type="primary"
            onClick={() => {
              typeRef.current.setOpen(true);
            }}
          >
            工资类型设置
          </Button>,
          <Button onClick={handleExport}>导出</Button>,
        ]}
        pagination={{
          showSizeChanger: true,
        }}
        request={async (params) => {
          return await dispatch({
            type: `${namespace}/queryTable`,
            params,
          });
        }}
        columns={calcColumns({ operate, venueArr })}
      />
      <SetTypeModal ref={typeRef} dispatch={dispatch} />
      <SetWagesModal
        ref={wagesRef}
        reload={() => {
          actionRef.current?.reload();
        }}
        dispatch={dispatch}
      />
    </PageContainer>
  );
};

export default connect((state) => ({
  ...state[namespace],
  submitLoading: state.loading.effects[`${namespace}/submitItem`],
}))(Page);
